import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    DeviceEventEmitter
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import Loading from "../../utils/Loading";
import Header from "../../components/header";

let randColors = ['#56ade5','#3fdc9e','#ffb473','#d3a190','#fa776c']

let navigation

export default class DutyManager extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataArray: [],
            isRefresh: false
        }
    }

        componentWillUnmount() {
            this.deleteListener.remove();
        }
    
        componentWillMount() {
            this.deleteListener = DeviceEventEmitter.addListener('deleteRoleSuccess', (role) => {
                this.getDutyList()
            });
        }

    componentDidMount() {
        this.getDutyList()
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'职务管理'} RightButton={() => this.renderRightButton()}></Header>

                <View style={{ flex: 1 }}>
                    <FlatList
                        data={this.state.dataArray}
                        renderItem={this.renderItemView.bind(this)}
                        extraData={this.state}
                        onRefresh={this.refreshData}
                        refreshing={this.state.isRefresh}
                        ListEmptyComponent={this.renderEmpty.bind(this)}
                    />
                </View>

                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        )
    }

    renderItemView({ item, index }) {
        return (
            <View
                style={styles.dutyBox}
            >
                <TouchableOpacity
                    style={styles.dutyBox1}
                    activeOpacity={0.8}
                    onPress={() => {
                        navigation.navigate('DutyDetail', {
                            roleId: item.roleId,
                            totalDuties: JSON.stringify(this.state.dataArray),
                            completion: ()=>{
                                this.getDutyList()
                            }
                        })
                    }}
                >
                    <View style={[styles.dutyBg, {backgroundColor: randColors[item.roleId%5]}]}>
                        <Text style={styles.dutyTitle}>{item.roleName && item.roleName.length > 2 ? item.roleName.substring(0,2):item.roleName}</Text>
                    </View>
                    <Text style={styles.dutyText}>{item.roleName}</Text>
                </TouchableOpacity>
            </View>
        )
    }

    renderEmpty() {
        if (!this.state.isRefresh) {
            return (
                <NoData Desc="暂无数据" style={{ marginTop: gREM(200) }} />
            )
        } else {
            return (
                null
            )
        }
    }

    renderRightButton() {
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                onPress={this.add}>
                <View style={styles.rightBox}>
                    <Text style={styles.rightText}>添加</Text>
                </View>
            </TouchableOpacity>
        )
    }

    add = () => {
        navigation.navigate('DutyOperation',{
            isAdd: true,
            totalDuties: JSON.stringify(this.state.dataArray),
            completion: ()=>{
                navigation.goBack()
                this.getDutyList()
            }
        })
    }

    getDutyList() {
        if (this.Loading) {
            this.Loading.show();
        }
        let param = {
            merchantId: Constant.userInfo.merchantId,
        }
        HttpUtils.postRequest(HttpUrls.getRoles, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                let data = result.data
                this.setState({
                    dataArray: data
                })
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    rightBox: {
        height: '100%',
        width: 70,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },
    rightText: {
        fontSize: 16,
        color: '#333333',
        fontWeight: 'bold',
    },
    dutyBox: {
        width: '100%',
        height: 100,
        flexDirection: 'column',
        justifyContent: 'flex-start'
    },
    dutyBox1: {
        width: '100%',
        height: 90,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingHorizontal: 15,
        backgroundColor: '#fff'
    },
    dutyBg: {
        width: 60,
        height: 60,
        borderRadius: 30,
        justifyContent: 'center',
        alignItems: 'center'
    },
    dutyTitle: {
        color: '#fff',
        fontSize: 17
    },
    dutyText: {
        marginLeft: 20,
        color: '#333',
        fontSize: 16
    }

})